{% extends "admin/pub/base.html" %}

{% block title %}
<title>添加用户</title>
{% endblock %}


{% block js %}
<script src="/static/admin/js/jquery-1.8.3.min.js"></script>
{% endblock %}

{% block con-header %}
{% endblock %}


{% block content-body %}

<div class="widget am-cf">
  <div class="widget-head am-cf">
    <div class="widget-title  am-cf"> 会员添加

<div class="widget-body am-fr">
  <form class="am-form tpl-form-border-form tpl-form-border-br am-u-sm-6 am-u-sm-offset-2" method="post" action="{% url 'user_insert' %}" enctype="multipart/form-data">
    {% csrf_token %}
    <div class="am-form-group">
      <label for="user-name" class="am-u-sm-3 am-form-label">
        <font style="vertical-align: inherit;">
          <font style="vertical-align: inherit;">姓名</font></font>
      </label>
      <div class="am-u-sm-9">
        <input type="text" class="tpl-form-input" name="username" placeholder="请输入姓名"><br>
      </div>
      <label for="user-name" class="am-u-sm-3 am-form-label">
        <font style="vertical-align: inherit;">
          <font style="vertical-align: inherit;">密码</font></font>
      </label>
      <div class="am-u-sm-9">
        <input type="password" class="tpl-form-input" name="password" placeholder="请输入密码"><br>
      </div>

      <label for="user-name" class="am-u-sm-3 am-form-label">
        <font style="vertical-align: inherit;">
          <font style="vertical-align: inherit;">邮箱</font></font>
      </label>
      <div class="am-u-sm-9">
        <input type="text" class="tpl-form-input" name="email" placeholder="请输入邮箱"><br>
      </div>

      <label for="user-name" class="am-u-sm-3 am-form-label">
        <font style="vertical-align: inherit;">
          <font style="vertical-align: inherit;">手机号</font></font>
      </label>
      <div class="am-u-sm-9">
        <input type="text" class="tpl-form-input" name="phone" placeholder="请输入手机号"><br>
      </div>


      <label for="user-name" class="am-u-sm-3 am-form-label">
        <font style="vertical-align: inherit;">
          <font style="vertical-align: inherit;">年龄</font></font>
      </label>
      <div class="am-u-sm-9">
        <input type="text" class="tpl-form-input" name="age" placeholder="请输入年龄"><br>
      </div>

      <div class="am-u-sm-12 am-u-sm-offset-3">
        <label class="am-radio-inline"><input type="radio" name="sex" value="男"> 男</label>
        <label class="am-radio-inline"><input type="radio" name="sex" value="女"> 女</label>
      </div>
      <br>


        <div class="am-u-sm-12 am-u-sm-offset-3">
          设置头像: <input type="file" name="pic" id="picture"> <br>
          <img width="150" src="/static/pics/default/default.jpg" alt="" id="img1"> <br><br><br>
        <div class="am-form-group">
            <div class="am-u-sm-9 am-u-sm-push-1">
            <button class="am-btn am-btn-primary tpl-btn-bg-color-success ">提交</button>
            </div>
        </div>
        </div>
    </div>
  </form>
</div>

    </div>
  </div>
</div>
{% endblock %}

{% block img_js %}
    <script>
        $(document).ready(function(){
            $('#picture').change(function(){
                var pic1 = this.files[0];
                preview_picture(pic1);
            });
        });
        function preview_picture(pic){
            var r = new FileReader();
            r.readAsDataURL(pic);
            r.onload = function(e){
                $('#img1').attr('src',this.result).show();
            };
        }
    </script>
{% endblock %}